<template>
    <div class="tags">
        <el-tag
        v-for="(tag,index) in tags"
        :key="index"
        :closable="tag.name !== 'home'"
        :disable-transitions="false"
        :effect="curRoute.name == tag.name? 'dark' : 'plain'"
        @click="changeMenu(tag)"
        @close="handClose(tag,index)"
        >
        {{tag.label}}
        </el-tag>
    </div>
</template>

<script setup>
import { breadCum } from '../store/index'
import { useRouter,useRoute } from 'vue-router'
import { computed } from '@vue/runtime-core'
const router = useRouter()
//useRoute实例可以拿到当前页面的路由信息
const route = useRoute()
const bStore = breadCum()
const tags = bStore.tabsList

const curRoute = computed(()=>{
    return router.currentRoute.value
})

//路由跳转
const changeMenu = (tag) =>{
    router.push({ name: tag.name})
}

//关闭面包屑
const handClose = (tag,index) =>{
    let curIndex = tags.length - 1
    bStore.removeTab(tag)
    if(route.name !== tag.name){
        return 
    }else{
        router.push({ name: tags[index -1].name })
    }
}

</script>

<style lang="less" scoped>
.tags{
    padding:20px;
    width:100%;
    .el-tag{
        margin-right:15px;
        cursor:pointer;
    }
}

</style>